<template>
  <div :id="name" class="container" />
</template>
<script>
import { Map } from './index.js'
import JN from './data/jinan.json'
import JNHeat from './data/jnHeat.js'
export default {
  name: 'Map',
  props: {
    name: {
      type: String,
      default: '0'
    },
    api: {
      type: String,
      default: '0'
    }
  },
  mounted() {
    this.drawMap()
    this.drawArea()
    this.drawHeat()
  },
  methods: {
    drawMap() {
      this.map = new Map(this.name)
    },
    drawArea() {
      this.map.addLayer('jn').then(layer => {
        this.map.addArea(layer, JN)
      })
    },
    drawHeat() {
      this.map.addHeat(JNHeat)
    }
  }
}
</script>
<style lang="less">
@import "./info/info.less";
</style>
<style scoped>
.container{width:100%;height:100%}
</style>
